<template>
  <div class="history-record">
    <template v-if="historyRecordLen">
      <div class="handle-utils">
        <div></div>
        <div
          class="setting-btn"
          @click="showBatchHandleBtn = !showBatchHandleBtn"
        >
          <template v-if="!showBatchHandleBtn">
            <el-icon class="mr-1"><Setting /></el-icon>管理
          </template>
          <template v-else>
            <span class="text-red-500 mr-5" @click.stop="clearHistoryRecords">
              清空浏览记录
            </span>
            <span class="text-gray-text">取消</span>
          </template>
        </div>
      </div>
      <div class="time-line">
        <el-timeline>
          <template v-for="item in historyRecords" :key="item.time">
            <el-timeline-item
              v-if="item.records.length"
              center
              :timestamp="item.time"
              placement="top"
            >
              <el-card
                v-for="record in item.records"
                :key="record.title"
                class="mb-2 cursor-pointer"
                @click="navigateToDetail(record.sourceId, record.sourceType)"
              >
                <div class="flex items-center justify-between">
                  <div>
                    <h4>{{ record.title }}</h4>
                    <!-- <p>{{ record.content }}</p> -->
                  </div>
                  <el-tag v-if="record.sourceType == '1'" type="success"
                    >资讯</el-tag
                  >
                  <el-tag v-else-if="record.sourceType == '2'" type="danger"
                    >政策</el-tag
                  >

                  <el-tag v-else-if="record.sourceType == '3'" type="warning"
                    >部门</el-tag
                  >
                  <el-tag v-else-if="record.sourceType == '4'" type="info"
                    >立项</el-tag
                  >
                </div>
              </el-card>
            </el-timeline-item>
          </template>
        </el-timeline>
      </div>
    </template>
    <template v-else>
      <el-empty description="近期没有浏览记录" />
    </template>
  </div>
</template>

<script setup lang="ts">
import { Setting } from "@element-plus/icons-vue";
import { useHistoryRecordHooks, navigateToDetail } from "./hooks";
const {
  showBatchHandleBtn,
  clearHistoryRecords,
  historyRecords,
  removeRecord,
  historyRecordLen
} = useHistoryRecordHooks();
</script>

<style scoped lang="postcss">
.history-record {
  @apply px-4 bg-white py-3;
  .handle-utils {
    @apply flex justify-between items-center border-b border-gray-bg pb-3;
    .setting-btn {
      @apply flex items-center cursor-pointer;
      height: 32px;
    }
  }
  .time-line {
    @apply mt-4;
  }
}
</style>
